<template>
	<view class="homepage" :key="refreshKey">
		<!-- <view class="userimg">
			<image :src="formatAvatar()" mode=""></image>
		</view> -->
		<view class="header" style="animation-duration: 2s;">
			<view class="title"></view>
			<view class="bg-gradual">
				<view class="swiper-content">
					<uv-swiper key-name="cover" style="background: transparent;" radius="0" :list="carousels"
						height="100%" @click="carouselClickEvent" circular ></uv-swiper>
				</view>
			</view>
		</view>
		<uv-row class="custom-notice-bar-search" justify="space-between">
			<image class="Notification-icon" src="/static/img/home/notice.png" mode="widthFix"></image>
			<uv-notice-bar speed="50" bgColor="transparent" color="#000" :icon="false"
				:text="homeRollAdv"></uv-notice-bar>
		</uv-row>

		<view class="special-list">
			<view class="special-item" style="animation-duration: 2s;">
				<view class="bbjy"></view>
			</view>
			<view class="jfd-hdgg"style="animation-duration: 2s;">
				<view class="jfd" @click="pointMallPage" ></view>
				<view class="hdgg" @click="noticePage" ></view>
			</view>
		</view>
		<view class="more">
			<view class="more-title">
				<view class="line"></view>
				推荐产品
			</view>
			<view class="more-text" @click="goTabBar('/pages/project/project')">
				查看更多
				<image src="/static/img/home/zhankai.png"></image>
			</view>
		</view>
		<view class="bg-gradual" v-if="presaleAdSetting.enableFlag">
			<view class="swiper-content">
				<uv-swiper radius="0" style="background: transparent;" :list="[presaleAdSetting.adPic]" height="100%"></uv-swiper>
			</view>
		</view>
		<view class="project-list">
			<!-- <view v-show="inFutureFlag">
				<uv-empty mode="list" text="即将上线,敬请期待"></uv-empty>
			</view>
			<view class="presale" v-show="!inFutureFlag && presaleAdSetting.enableFlag">
				<view class="presale-project-name">{{ presaleAdSetting.projectName }}</view>
				<view class="circle-rate">
					<view class="circle-rate-inner">{{ presaleAdSetting.rateText }}</view>
				</view>
				<view class="project-amount">
					<view>{{ presaleAdSetting.projectMinAmount }}</view>
					<view>{{ presaleAdSetting.projectMaxAmount }}</view>
				</view>
				<view class="bottom-text">
					<uv-button color="linear-gradient(to right, rgb(255, 128, 0), rgb(255, 170, 127))" shape="circle"
						size="mini" :text="presaleAdSetting.bottomText"></uv-button>
				</view>
			</view> -->
			<view class="project" v-for="(project, index) in projects" :key="index" style="animation-duration: 2s;">
				<view class="project-name">
					<view>{{ project.projectName }}</view>
				</view>
				<view class="project-scale-label">
					<!-- <image src="../../static/img/home/icon_xiangmu.png" mode="widthFix"></image> -->
					<view class="xmgm">
					<text>项目规模：</text>
					<text class="project-scale-value">{{ project.projectAmount }}万USDT</text>
				    </view>
					<view class="project-scale-r">{{ project.rebateModeName }}</view>
				</view>
				<view class="project-pic">
					<!-- <image mode="widthFix" :src="project.mainPic"></image> -->
				</view>

				<view class="project-schedule">
					<view class="project-schedule-l">
						<text class="project-schedule-label">项目进度</text>
					</view>
					<view class="project-schedule-r">
						<uv-line-progress :percentage="project.projectSchedule" :showText="false" activeColor="#FFF9C3"
							height="12rpx" inactiveColor='#f7fbfa'></uv-line-progress>
					</view>
					<view class="project-schedule-value"><text>{{ project.projectSchedule }}%</text></view>

				</view>
				<view class="invest-info">
					<view class="list">
						<view class="invest-info-item">
							<view class="invest-info-item-value">{{ project.term }}</view>
							<view class="invest-info-item-label">项目期限</view>
							<view class="invest-info-item-label2">（{{ project.timeUnit }}）</view>
						</view>
						<view class="invest-info-item">
							<view class="invest-info-item-value">{{ project.rate }}%</view>
							<view class="invest-info-item-label">收益率</view>
							<view class="invest-info-item-label2">（%）</view>
						</view>
						<view class="invest-info-item">
							<view class="invest-info-item-value">{{ project.singleTimeMinIncome }}</view>
							<view class="invest-info-item-label">每期收益</view>
							<view class="invest-info-item-label2">（USDT）</view>
						</view>
						<view class="invest-info-item">
							<view class="invest-info-item-value">{{ project.minSubscribeAmount }}</view>
							<view class="invest-info-item-label">起购金额</view>
							<view class="invest-info-item-label2">（USDT）</view>
						</view>
					</view>
					<view class="project-invest-btn" @click="projectDetailPage(project.id)">立即投资</view>
				</view>
			</view>

		</view>
		<uv-back-top top="200" icon="../../static/img/tops.png" :iconStyle='backTopIconStyle'
			:scroll-top="scrollTop"></uv-back-top>
		<uv-modal ref="secretKeyModal" title="安全秘钥生成" confirmText="我已妥善保管" :close-on-click-overlay="false"
			@confirm="closeSecretKeyModal" :close-on-confirm="false">
			<view class="slot-content">
				<view class="secret-key-tip1">
					尊敬的投资者，这是您的专属安全秘钥，用于资金交易、密码修改等重要操作的双重验证，请务必妥善保管。
				</view>
				<view class="secret-key">{{ secretKey }}</view>
				<uv-button type="primary" shape="circle" text="点击复制" @click="copyData(secretKey)"></uv-button>
				<uv-button type="primary" shape="circle" color="#0C9748" text="验证秘钥" @click="veriKey(secretKey)" style="margin-top:10rpx;"></uv-button>
				<view class="secret-key-tip2">重要提示：此密钥仅显示一次，关系到您的账户资金安全。请立即保存，切勿泄露给任何人，包括客服人员。</view>
			</view>
		</uv-modal>
	</view>
</template>

<script>
import common from '@/common/common'
export default {
	data() {
		return {
			accountInfo: '',
			backTopIconStyle: {
				width: '80rpx',
				height: '80rpx'
			},
			homeRollAdv: '',
			scrollTop: 0,
			carousels: [],
			homeProjectTypes: [],
			currentTab: 0,
			projects: [],
			inFutureFlag: false,
			presaleAdSetting: '',
			secretKey: '',
			secretKeyDisplayedFlag: false,
			key_ok:false,
			refreshKey:0
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(option) {
		this.secretKey = option.secretKey;
		this.getHomeRollAdv();
		this.findCarousel();
		this.getPresaleAdSetting();
		this.findRecommendProject();
	},
	onReady() {
		this.showSecretKeyModal();
	},
	onShow() {
		this.getMemberInfo();
		this.refreshKey += 1;
	},
	onHide() { },
	onReachBottom() { },
	onPullDownRefresh() { },
	methods: {

		closeSecretKeyModal() {
			var that = this;
			uni.showModal({
				title: '提示',
				cancelText: that.key_ok ? '再次查看' :'返回验证',
				showCancel:that.key_ok,
				content: that.key_ok ? '确定保管了吗': '请先返回验证秘钥',
				success: function (res) {
					if (res.confirm) { 
						if(!that.key_ok){
							that.$refs.secretKeyModal.open();
						}
					}
					if (res.cancel) {
						that.$refs.secretKeyModal.open();
					}
				}
			});

		},

		copyData(data) {
			common.copyData(data);
		},

		veriKey(data) {
			console.log("test");
			uni.$uv.http.post('/member/veriKey',{secretKey:data}).then(res => {
						if(res.code==200){
						this.key_ok = true;
						uni.showToast({
						icon: 'success',
						title: '验证成功',
						duration: 2000
						});
					}
				});
		},

		showSecretKeyModal() {
			console.log(this.secretKey);
			if (this.secretKey && !this.secretKeyDisplayedFlag) {
				this.secretKeyDisplayedFlag = true;
				this.$refs.secretKeyModal.open();
			}
		},

		getPresaleAdSetting() {
			var that = this;
			uni.$uv.http.get('/setting/getPresaleAdSetting').then(res => {
				that.presaleAdSetting = res.data;
			});
		},

		getMemberInfo() {
			var that = this;
			uni.$uv.http.get('/member/getMemberInfo').then(res => {
				that.accountInfo = res.data;
			});
		},

		formatAvatar() {
			return this.accountInfo.avatar ? this.accountInfo.avatar :
				'/static/img/user-img2.png';
		},

		noticePage() {
			uni.navigateTo({
				url: '../notice/notice'
			});
		},

		pointMallPage() {
			uni.navigateTo({
				url: '../pointMall/pointMall'
			});
		},

		getHomeRollAdv() {
			var that = this;
			uni.$uv.http.get('/setting/getHomeRollAdv', {
				params: {}
			}).then(res => {
				that.homeRollAdv = res.data;
			});
		},

		searchPage() {
			uni.navigateTo({
				url: '../search/search'
			});
		},

		changeTab(tab) {
			this.currentTab = tab.index;
			var projectType = this.homeProjectTypes[this.currentTab].dictItemCode;
			if (projectType == '3' || projectType == '4') {
				this.inFutureFlag = true;
				this.projects = [];
			} else {
				this.inFutureFlag = false;
				this.findCanBuyProject();
			}
		},

		projectPage() {
			uni.switchTab({
				url: '/pages/project/project'
			});
		},

		projectDetailPage(id) {
			uni.navigateTo({
				url: '../projectDetail/projectDetail?id=' + id
			});
		},

		carouselClickEvent(index) {
			var carousel = this.carousels[index];
			if (carousel.clickDealWay == '1') {
				return;
			} else if (carousel.clickDealWay == '2') {
				uni.navigateTo({
					url: '../' + carousel.link
				});
			} else if (carousel.clickDealWay == '3') {
				uni.navigateTo({
					url: '../customWebView/customWebView?link=' + carousel.link
				});
			}
		},

		findCarousel() {
			var that = this;
			uni.$uv.http.get('/carousel/findCarousel').then(res => {
				that.carousels = res.data;
			});
		},

		findRecommendProject() {
			var that = this;
			uni.$uv.http.get('/financialProject/findRecommendProject', {
				params: {
				}
			}).then(res => {
				that.projects = res.data;
			});
		},
		goTabBar(path) {
			uni.switchTab({
				url: path
			});
		},
	}
}
</script>

<style scoped lang="less">
page {
	background: url('/static/img/my_bg1.png') no-repeat;
	background-size: 100% 20%;
	background-color: #f3f5ff;
}

.secret-key-tip1 {}

.secret-key {
	text-align: center;
	padding: 32rpx 16rpx;
	background: #d9e3d9;
	border-radius: 32rpx;
	margin: 24rpx 0px;
}

.secret-key-tip2 {
	color: red;
	font-size: small;
	padding-top: 16rpx;
}

.homepage {
	padding-bottom: 120rpx;

	.header {
		// height: 428rpx;
		position: relative;
		overflow: hidden;
		padding-bottom: 32rpx;

		.bg-img {
			width: 100%;
			position: absolute;
			height: 100%;
			z-index: 0;
			filter: blur(20px);
			transform: scale(2);
		}

		.title {
			font-weight: 600;
			color: #FFFFFF;
			font-size: 36rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			position: relative;
			z-index: 1;
		}
	}

	.more {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		padding: 0 32rpx;
		height: 52rpx;
		margin-top: 30rpx;
		margin-bottom: 18rpx;

		.more-title {
			font-size: 32rpx;
			display: flex;
			align-items: center;

			.line {
				width: 6rpx;
				height: 28rpx;
				background-color:#2d3c87;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-right: 6rpx;
			}
		}

		.more-text {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #000;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
}


.invest-info {
	background: rgba(233, 230, 221, 0.2);
	padding: 28rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 1px solid #FFF;
	.list {
		display: flex;
		justify-content: space-between;
	}
}

.invest-info-item {
	flex: 1;
	text-align: center;
}

.invest-info-item-label {
	font-size: 24rpx;
	color: #FFF;
	padding-bottom: 4rpx;
}

.invest-info-item-label2 {
	font-size: 20rpx;
	color: #FFF;
}

.invest-info-item-value {
	font-size: 28rpx;
	padding-bottom: 12rpx;
	color: #E4D494;
	font-weight: bold;
}




.project-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 32rpx;
	padding-right: 32rpx;
	padding-bottom: 16rpx;
}

.project-tabnew {
	// height: 75rpx;
	padding: 20rpx 20rpx;
	box-sizing: border-box;
	box-shadow: 5px 5px 5px #f8f7f7;

	// display: flex;
	// align-items: center;
}

.page-content {}

// 2024-10-06新写

.userimg {
	width: 46rpx;
	height: 46rpx;
	padding: 0px 46rpx;
	margin-bottom: 43rpx;
	padding-top: 20rpx;

	image {
		width: 100%;
		height: 100%;

	}

}

.bg-gradual {
	background: transparent;
}

.swiper-content {
	width: 686rpx;
	margin: 0px auto;
	box-sizing: border-box;
	border-radius: 20rpx;
	overflow: hidden;
	height: 323rpx;
	// box-shadow: 0px 5px 5px #d8eef8;
}

.custom-notice-bar-search {
	align-items: center;
	background-color: #FFF;
	border-radius:20rpx;
	margin: 32rpx;
}

.Notification-icon {
	width: 48rpx;
	height: 44rpx;
	display: block;
	margin-left: 14rpx;
}

.special-list {
	display: flex;
	padding: 0rpx 32rpx;
	// padding-bottom: 38rpx;
	.jfd-hdgg{
		width: 50%;
		display: flex;
		flex-direction: column;
		.jfd{
		width: 100%;
		height: 100%;
		background: url(/static/img/home/jfd.png);
		background-size: 100% 100%;
	}
		.hdgg{
			width: 100%;
			height: 100%;
			background: url(/static/img/home/hdgg.png);
			background-size: 100% 100%;
		}
	}
}

.presale {
	padding-top: 16rpx;

	.presale-project-name {
		text-align: center;
		padding-bottom: 16rpx;
	}

	.circle-rate {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 16rpx;

		.circle-rate-inner {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			border: 4rpx solid #c87519;
			color: #c87519;
			font-size: 32rpx;
		}
	}

	.project-amount {
		display: flex;
		justify-content: space-between;
		padding-left: 120rpx;
		padding-right: 120rpx;
		padding-bottom: 16rpx;
		color: #888;
		font-size: small;
	}

	.bottom-text {
		padding-left: 120rpx;
		padding-right: 120rpx;
	}
}

.special-item {
	width: 50%;
	height:370rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	justify-content: space-between;
    .bbjy{
		width: 100%;
		height: 100%;
		background: url(/static/img/home/bbjy.png);
		background-size: 100% 100%;
	}
	.special-item-icon {
		image {
			width: 84rpx;
		}

	}

	.special-title {
		color: #000;
		font-weight: bold;
		font-size: 32rpx;
	}

	.special-ds {
		color: #8A8C90;
		margin-top: 16rpx;
		font-size: 24rpx;
	}

}

/deep/ .uv-tabs__wrapper__nav__line {
	// height: 100%;
	display: none;
}

.project-list {

	.project {
		background: url(/static/img/xmbg.png);
		background-size: 100% 100%;
		border-radius: 20rpx;
		padding: 20rpx;
		padding-top: 28rpx;
		box-sizing: border-box;
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.ip-highlight {
		color: red;
	}

	.project-name {
		font-size: 34rpx;
		font-weight: bold;
		color: #FFF;
		padding: 10rpx 0px;
		text-align: left;
	}

	.project-scale-label {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #FFF;
		.xmgm{
			background: rgba(228, 212, 148, 0.1);
			padding: 8rpx 16rpx;
		}
		.project-scale-value {}

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
	}

	.project-scale-r {
		font-size: 20rpx;
		background: rgba(228, 212, 148, 0.1);
		color: #E4D494;
		padding: 8rpx 16rpx;
		margin-left: 20rpx;
	}

	.project-pic {
		width: 100%;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.project-schedule {
		display: flex;
		align-items: center;
		height: 90rpx;
		// border-bottom: 1px solid #f1f3f4;

		.project-schedule-label {
			padding-right: 16rpx;
			color: #FFF;
		}

	}

	.project-schedule-value {
		color: rgba(228, 212, 148, 1);
		font-weight: bold;
		font-size: 28rpx;
		margin-left: 22rpx;
	}

	.project-schedule-l {
		// padding-right: 20rpx;
		font-size: smaller;
		flex-grow: 0;
		flex-shrink: 0;
		color: rgba(255, 255, 255, 0.40);
	}

	.project-schedule-r {
		flex: 1;


	}

	.project-invest-btn {
		width: 100%;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		margin-top: 28rpx;
		background: #F9C25F;
		border-radius: 34rpx;
		color: #FFF;
		font-weight: 600;
	}
}

/deep/ .uv-line-progress__background {
	//border: 2rpx solid #0065b7;
	// height: 10rpx;
}

/deep/ .uv-line-progress__line {
	height: 100% !important;
}

/deep/ .uv-sticky {
	top: 0px !important;
}

/deep/ .uv-line-progress__line {
	background: linear-gradient(270deg, #FFB637 0%, #FFF9C3 100%) !important;
}
</style>